import { Fill, Icon, Stroke, Style, Text } from 'ol/style.js';
import { Vector as VectorSource } from 'ol/source.js'; /* 绘画 样式*/
import GeoJSON from 'ol/format/GeoJSON.js'; /* 使用GeoJSON 作为显示矢量图层 */
import { Vector as VectorLayer } from 'ol/layer.js'; /* 矢量图层数据，样式整合 */
const mapInfo = {};
/* 点,线的信息  Point ,LineString*/
mapInfo.sourceInfo = function (sourceType) {
  const featureInfo = []
  var info = JSON.parse(localStorage.getItem('featureList')) || [];
  /* 点线需要分开 */
  for (var i = 0; i < info.length; i++) {
    if (info[i].type === sourceType) {
      const listInfo = { 'type': 'Feature', "properties": { id: info[i].id, "title": info[i].title, "remark": info[i].remark, src: info[i].src }, 'geometry': { 'type': info[i].type, 'coordinates': info[i].coordinates, } }
      featureInfo.push(listInfo)
    }
  }
  const geojsonObject = { 'type': 'FeatureCollection', 'features': featureInfo }
  var vectorSource = new VectorSource({
    features: (new GeoJSON()).readFeatures(geojsonObject)
  });
  return vectorSource;
}
/* 点的样式 */
mapInfo.layersPoint = function () {
  /* 显示自己数据 */
  var getText = function (feature) { var text = feature.getProperties().title; return text };
  var getSrc = function (feature) {
    var src = feature.getProperties().src;
    return src
  };
  var createTextStyle = function (feature, resolution) {
    return new Text({
      text: getText(feature, resolution),
      fill: new Fill({ color: '#050505', })
    });
  };
  var createImageStyle = function (feature, resolution) {
    return new Icon(/** @type {module:ol/style/Icon~Options} */({
      // anchor: [0.5,0.5],
      // imgSize:[5,5],
      scale: 0.1,
      opacity: 0.95,
      src: getSrc(feature, resolution) ? 'http://cyclv.gitee.io/imgs/ol/point/' + getSrc(feature, resolution) + '.png' : 'http://cyclv.gitee.io/imgs/ol/point/ol1.png',
    }))
  };
  /* 样式控制 */
  function jeosionStyle(feature, resolution) {
    return new Style({
      image: createImageStyle(feature, resolution),
      text: createTextStyle(feature, resolution)
    });
  }
  var vectorLayer = new VectorLayer({
    source: mapInfo.sourceInfo('Point'),
    style: jeosionStyle
  });
  return vectorLayer;
}
/* 线的信息+样式组合 */
mapInfo.layersLine = function (lineStyle) {
  /* 显示自己数据 */
  var getText = function (feature) { var text = feature.getProperties().title; return text };
  var createTextStyle = function (feature, resolution) {
    return new Text({
      text: getText(feature, resolution),
      fill: new Fill({
        color: '#050505',
      })
    });
  };
  /* 样式控制 */
  function jeosionStyle(feature, resolution) {
    return new Style({
      stroke: new Stroke({
        width: 4,
        color: lineStyle.color
      }),
      fill: new Fill({
        color: [0, 0, 255, 0.6]
      }),
      text: createTextStyle(feature, resolution)
    });
  }
  var vectorLayer = new VectorLayer({
    source: mapInfo.sourceInfo('LineString', lineStyle.type),
    style: jeosionStyle
  });
  return vectorLayer;
}
export default mapInfo;